<template>
	<view class="content">
		<!-- <image mode="aspectFill" style="z-index: -1; width: 100%; height: 100%; position: absolute; left: 0; right: 0;"
			src="../../../static/images/prefile/group-leader-bg.png"></image> -->
		<view class="head-box">

			<view class="group-leader-box">
				<view class="leader-info-box">
					<view class="leader-info">
						<view class="avater-box">
							<image :src="userInfo.avatar"></image>
						</view>
						<view class="leader-info-user">
							<view class="name">{{userInfo.nickname}}</view>
							<view class="rz-box">
								<image src="../../../static/images/prefile/rz.png"></image>
								<view class="tuanzhu">{{userInfo.levelName}}</view>
							</view>
						</view>
					</view>
					<view class="leader-price">
						<view class="price-tips">累计已赚赏金</view>
						<view class="price">￥{{leaderInfo.total}}</view>
					</view>
				</view>
				<view class="group-row">
					<view class="group-item">
						<view class="name">今日成团赏金</view>
						<view class="price">￥{{leaderInfo.toady_subsidy}}</view>
					</view>
					<view style="width: 1upx;height: 48upx;background: #EEEEEE;"></view>
					<view class="group-item">
						<view class="name">邀请赏金</view>
						<view class="price">￥{{leaderInfo.share_total}}</view>
					</view>
					<view style="width: 1upx;height: 48upx;background: #EEEEEE;"></view>
					<view class="group-item"
						@click="$Router.push('/pages/prefile/group-leader/group-leader-histry/group-leader-histry')">
						<view class="name">累计成团次数</view>
						<view class="price">{{leaderInfo.team_success}}</view>
					</view>
				</view>
			</view>

			<scroll-view scroll-x class="tabs-content" enable-flex scroll-with-animation>
				<view class="order-nav">
					<view class="nav-item" :class="{ 'nav-item-active': tabindex === index }"
						v-for="(nav, index) in orderState" :key="index" @tap="onNav(index, nav.id, nav.type)">
						<view class="item-title" :class="{ 'item-title-active': tabindex === index }">{{ nav.name }}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="list-box">
			<mescroll-body ref="mescrollRef" height="1050" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="list-item" v-for="(item, index) in tabList" :key="index">
					<view class="goods-details">
						<view class="image-box">
							<image :src="item.has_one_group.has_one_goods.thumb"></image>
						</view>
						<view class="goods-info-box">
							<view class="goods-name text-line2">{{item.has_one_group.has_one_goods.title}} </view>
							<view class="goods-price">¥{{item.groups_option_level.group_price}}</view>
							<view class="goods-chengtuan">
								{{item.groups_option_level.member_num}}人成团，{{item.zj_user_num}}人中奖</view>
							<view class="goods-tips">
								<image src="../../../static/images/prefile/red-package.png"></image>
								<text>商家补贴￥{{item.subsidy}}</text>
							</view>
						</view>
						<view class="baoming"
							>
							<view class="">已报名{{item.has_many_success_member_count}}人</view>
							<view style="display: flex; align-items: center; margin-top: 3upx;">
								<u-line-progress height="8" style="height: 8upx; width: 85upx;" active-color="#FFFF00"
									:percent="(item.has_many_success_member_count/item.groups_option_level.member_num) * 100"
									:show-percent="false"></u-line-progress>
								<view
									style="font-size: 16upx; padding-top: 15upx; color: #E5E5E5; margin-left: 5upx; padding-top: 10upx;">
									{{item.has_many_success_member_count}} </text>
									/{{item.groups_option_level.member_num}}</view>
							</view>
						</view>
					</view>

					<view style=" margin-top: 35upx; width: 646upx;height: 1upx;background: #EEEEEE;"></view>
					<view class="footer-box">
						<view style="text-align: center; display: flex; align-items: center; flex: 1;">
							拼团成功，成团可获得成团奖励 <text style="color:#FF652E;">￥{{item.has_one_group.balance}}</text>
						</view>
						<button class="share-box" :data-detail="item" open-type="share">
							去分享
						</button>
					</view>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import share from '@/shop/share';
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin],
		computed: {
			...mapState(['userInfo'])
		},
		data() {
			return {
				tabindex: 0,
				orderState: [],
				leaderInfo: {},
				page: 1, // 分页
				cate_id: 0, // 转入的type为0的动态状态
				type: 0,
				tabList: [],
			};
		},
		onShow() {
			this.groupLeader();
			this.gethomePagWxapp();
		},
		onUnload() {

		},
		methods: {

			onNav(index, id, type) {
				this.tabindex = index;
				this.type = type;
				if (this.type === 0) {

					this.cate_id = id;
				}
				this.downCallback();
			},
			// 下拉刷新列表
			downCallback() {
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			upCallback(page) {
				this.page = page.num;
				if (this.type === 0) { // 其他动态类型
					this.$http.get('user.leaderlisttype', {
						cate_id: this.cate_id,
						page: this.page
					}).then(res => {
						let curPageData = res.data.data;
						let curPageLen = curPageData.length;
						let totalCount = res.data.total;
						if (page.num == 1) this.tabList = []; //如果是第一页需手动置空列表
						this.tabList = this.tabList.concat(curPageData); //追加新数据
						this.mescroll.endBySize(curPageLen, totalCount);
					})

				} else if (this.type === 1) { // 正在拼团
					this.$http.get('user.leaderlist', {
						page: this.page
					}).then(res => {
						let curPageData = res.data.data;
						let curPageLen = curPageData.length;
						let totalCount = res.data.total;
						if (page.num == 1) this.tabList = []; //如果是第一页需手动置空列表
						this.tabList = this.tabList.concat(curPageData); //追加新数据
						this.mescroll.endBySize(curPageLen, totalCount);
					})
				} else if (this.type === 2) { // 大额赏金
					this.$http.get('user.leaderlistshangjin', {
						page: this.page
					}).then(res => {
						let curPageData = res.data.data;
						let curPageLen = curPageData.length;
						let totalCount = res.data.total;
						if (page.num == 1) this.tabList = []; //如果是第一页需手动置空列表
						this.tabList = this.tabList.concat(curPageData); //追加新数据
						this.mescroll.endBySize(curPageLen, totalCount);
					})
				}


			},
			// 获取团主详情
			groupLeader() {
				this.$http.get('user.groupLeader').then(res => {
					this.leaderInfo = res.data;
				})
			},

			// 获取拼团分类
			gethomePagWxapp() {
				return this.$http.get('hotGroup.homePagWxapp').then(res => {
					this.orderState = res.data;
					this.orderState.forEach((el, index) => {
						el.type = 0;
					});
					// this.orderState.unshift({
					// 	name: '正在拼团',
					// 	type: 1,
					// 	id: 0
					// });
					this.orderState.unshift({
						name: '大额赏金',
						type: 2,
						id: 0
					});
					this.onNav(0, 0, 2);
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import './group-leader.scss';
</style>
